<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Guage</title>
    <style>
    .container {
        margin: 0 auto;
        text-align: center;
    }

    .gauge_container {
        text-align: left;
        height: 450px;
        display: inline-block;
        border: 1px solid #ccc;
        margin: 40px 5px 0 5px;
    }

    .gauge {
        width: 300px;
        height: 200px;
        display: inline-block;
        -webkit-transform: translate3d(0, 0, 0);
    }

    .controls {
        text-align: left;
    }

    li {
        padding: 10px 0 0 0;
    }

    li.refresh {
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    label {
        font-family: Arial;
        display: inline-block;
        width: 65px;
        margin: 0 0 5px 0;
        text-align: right;
        padding: 5px;
        color: #919191;
    }

    input {
        font-weight: bold;
        font-size: 13px;
        padding: 10px;
        border: 1px solid #ccc;
        margin: 5px;
    }

    input[disabled=disabled] {
        font-weight: normal;
        font-size: 11px;
        padding: 0 0 0 10px;
        margin: 0px;
        color: #777777;
        border-color: transparent;
        background: #fff;
    }

    a:link.button,
    a:active.button,
    a:visited.button,
    a:hover.button {
        margin: 0px 5px 0 2px;
        padding: 7px 13px;
    }
    </style>
</head>

<body>
    <div id="gg1" style="width: 200px; height: 150px;"></div>
    <a href="#" id="gg1_refresh" class="button grey">Random Refresh</a>
    <script src="../raphael-2.1.4.min.js"></script>
    <script src="../justgage.js"></script>
    <script>
    document.addEventListener("DOMContentLoaded", function(event) {
        var gg1 = new JustGage({
            id: "gg1",
            value: 1024,
            min: 0,
            max: 10000,
            title: "Target",
            label: "",
            humanFriendly: true,
            startAnimationTime: 10000,
            refreshAnimationTime: 10000
        });

        document.getElementById('gg1_refresh').addEventListener('click', function() {
            gg1.refresh(getRandomInt(0, 1000000));
            console.log(gg1);
            return false;
        });
    });
    </script>
</body>

</html>
